<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    data() {
      return {
        dataArr: [],
        mychart: null,
        mapFunc: new Map(),
      };
    },
    created() {
      this.mapFunc["t1"] = this.chart1;
    },
    mounted() {
      var chartDom = document.getElementById("main");
      this.myChart = echarts.init(chartDom);
      this.chart1();
      this.getWebSocket();
    },

    methods: {
      chart1() {
        var option;
        option = {
          xAxis: {},
          yAxis: {},
          series: [
            {
              symbolSize: 20,
              data: this.dataArr,
              type: "scatter",
            },
          ],
        };

        option && this.myChart.setOption(option);
      },
      getWebSocket() {
        const ws = new WebSocket("ws://192.168.31.171:8090/api/echarts/ws");
        ws.onopen = (e) => {
          console.log(e);
        };
        ws.onmessage = (msg) => {
          let n = msg.data.split(",");
          const item = [Number(n[1]), Number(n[2])];
          this.dataArr.push(item);
          console.log(n[0], this.dataArr);
          this.mapFunc[n[0]]();
        };
      },
    },
  };
</script>

<style>
  #main {
    width: 100vw;
    height: 100vh;
  }
</style>
